<template>
	<div
		:v-show="!show.hideSide && !show.isShowClickLf"
		:id="id"
		:class="className"
		ref="linchart"
		:style="{ height: height, width: width1 }"
	/>
</template>

<script>
import echarts from "echarts";
import resize from "./mixins/resize";

export default {
	mixins: [resize],
	props: {
		show: {
			type: Object,
			default: { hideSide: false, isShowClickLf: false }
		},
		className: {
			type: String,
			default: "BrokenLineChart"
		},
		id: {
			type: String,
			default: "BrokenLineChart"
		},
		width: {
			type: String,
			default: "200px"
		},
		height: {
			type: String,
			default: "200px"
		},
		monthList: {
			type: Array,
			default: function() {
				return ["6月", "7月", "8月", "9月", "10月", "11月"];
			}
		},
		dataList: {
			type: Array,
			default: function() {
				return [20, 32, 1, 34, 20, 10];
			}
		},
		splitLineShow: {
			type: Boolean,
			default: true
		},
		splitLineColor: {
			// 数据线颜色
			type: String,
			default: "#b1041d"
		},
		xAxisLineColor: {
			// x轴颜色
			type: String,
			default: "#0462e3"
		},
		yAxisLineColor: {
			type: String,
			default: "#0462e3"
		},
		yAxisName: {
			type: String,
			default: ""
		},
		yAxisNameLocation: {
			type: String,
			default: "end"
		},
		yAxisNameGap: {
			type: Number,
			default: 1
		},
		gridLeft: {
			type: Number,
			default: 50
		},
		axisXTickShow: {
			type: Boolean,
			default: false
		},
		axisYTickShow: {
			type: Boolean,
			default: false
		},
		titleText: {
			type: String,
			default: "异常"
		}
	},
	data() {
		return {
			chart: null,
			width1: "350px"
		};
	},
	watch: {
		show(val) {
			console.log(val);
			if (val.winWidth < 1280) {
				this.width1 = "350px";
			} else {
				this.width1 = "100%";
			}
		}
	},
	mounted() {
		console.log(this.show.winWidth);
		// debugger
		if (this.show.winWidth < 1440) {
			this.width1 = "100%";
		} else {
			this.width1 = "100%";
		}
		setTimeout(() => {
			this.initChart();
		}, 600);
	},
	beforeDestroy() {
		if (!this.chart) {
			return;
		}
		this.chart.dispose();
		this.chart = null;
	},
	methods: {
		initChart() {
			this.chart = echarts.init(this.$refs.linchart);
			this.chart.setOption({
				xAxis: {
					type: "category",
					axisLine: {
						lineStyle: {
							color: this.xAxisLineColor,
							width: 1
						}
					},
					axisTick: {
						show: this.axisXTickShow
					},

					data: this.monthList
				},
				calculable: true,
				yAxis: [
					{
						type: "value",
						name: this.yAxisName,
						nameLocation: this.yAxisNameLocation,
						nameGap: this.yAxisNameGap,
						axisLine: {
							lineStyle: {
								color: this.yAxisLineColor,
								width: 1
							}
						},
						splitLine: {
							show: this.splitLineShow,
							lineStyle: {
								color: ["#0a2c6f"],
								width: 1,
								type: "solid"
							}
						},
						axisTick: {
							show: this.axisYTickShow
						}
					}
				],
				grid: {
					top: 20,
					left: this.gridLeft,
					right: 30,
					bottom: 20,
					height: "60%"
				},
				series: [
					{
						data: this.dataList,
						type: "line",
						itemStyle: {
							color: this.splitLineColor
						},
						cursor: "pointer"
					}
				],
				tooltip: {
					trigger: "axis",
					textStyle: {
						color: "#000",
						fontSize: 10
					},
					// position: {left: 100, top: 300},
					backgroundColor: "rgba(255,255,255,0.6)",
					formatter: `{b}: ${this.titleText}{c}`
				}
			});
		}
	}
};
</script>
